// 富文本编辑器
import React, { Component } from 'react';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

import { Input } from 'antd';

interface IProps {
	onchange?: Function;
	value?: string;
}

class Rich_text_editor extends Component<IProps> {
	state = {
		loading: false,
	};

	editor = {};

	componentDidMount() {
		// 接受传入的初始内容
		let value = this.props.value;
		console.log( 'mount' );
		this.init( value );
	}

	shouldComponentUpdate( nextProps: Readonly<IProps>, nextState: Readonly<{ dependencies: any }>, nextContext: any ): boolean {
		if ( nextProps.value !== this.props.value ) return true;
		return false;
	}

	componentWillUnmount() {
		console.log( 'unmount' );
	};
	

	init( init_value ) {
		const colorConfig = [
			{
				color: 'hsl(0, 75%, 60%)',
				label: '红'
			},
			{
				color: 'hsl(30, 75%, 60%)',
				label: '橙'
			},
			{
				color: 'hsl(60, 75%, 60%)',
				label: '黄'
			},
			{
				color: 'hsl(90, 75%, 60%)',
				label: '浅绿'
			},
			{
				color: 'hsl(120, 75%, 60%)',
				label: '深绿'
			},
			{
				color: '#FFFFFF',
				label: '白'
			},
			{
				color: '#000000',
				label: '黑'
			},
			{
				color: '#86BC25',
				label: '德勤绿'
			},
			{
				color: '#167DDC',
				label: '蓝'
			},

			// ...
		];

		const _this = this;
		// 初始化组件
		console.log( init_value );

		DecoupledEditor.create(
			// 文本内容所在标签
			document.querySelector( '#editor' ),
			{
				language: 'zh-cn',
				// 设置初始值
				initialData: init_value,
				// 加载图片上传组件
				// extraPlugins: [ MyCustomUploadAdapterPlugin ],
				
				// 自定字号列表
				fontSize: { options: [ 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,25,26,27,28,29,30,31,32,33,34,35 ] },
				fontColor: {
					colors: colorConfig
				},
				fontBackgroundColor: {
					colors: colorConfig
				},
				// 自定字体列表
				fontFamily: {
					options: [
						'default',
						'Arial, Helvetica, sans-serif',
						'Courier New, Courier, monospace',
						'Georgia, serif',
						'Lucida Sans Unicode, Lucida Grande, sans-serif',
						'Tahoma, Geneva, sans-serif',
						'Times New Roman, Times, serif',
						'Trebuchet MS, Helvetica, sans-serif',
						'Verdana, Geneva, sans-serif',
					],
				},
				// 自定heading列表
				heading: {
					options: [
						{
							model: 'paragraph',
							title: '正文',
							class: 'ck-heading_paragraph',
						},
						{
							model: 'heading1',
							view: 'h1',
							title: '标题1',
							class: 'ck-heading_heading1',
						},
						{
							model: 'heading2',
							view: 'h2',
							title: '标题2',
							class: 'ck-heading_heading2',
						},
						{
							model: 'heading3',
							view: 'h3',
							title: '标题3',
							class: 'ck-heading_heading3',
						},
						{
							model: 'heading4',
							view: 'h4',
							title: '标题4',
							class: 'ck-heading_heading4',
						},
					],
				},
				alignment: {
					options: [ 'left', 'center', 'right'  ]
				},
				// 移除组件
				removePlugins: [ 'MediaEmbed' ],
				toolbar: [
					'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor', 'alignment', 'bold', 'italic',  'undo', 'redo', 'Link', 'heading', 'bulletedList', 'numberedList'
				],
				// 自定图片toolbar内容
				image: {
					toolbar: [ 'imageTextAlternative' ],
				},
			}
		)
			.then( ( editor ) => {
				console.log( editor );
				// 选择toolbar所在标签
				const toolbarContainer = document.querySelector( '#toolbar-container' );
				// !toolbarContainer.children.length && 
				if( toolbarContainer.children.length ) {
					toolbarContainer.removeChild( toolbarContainer.children[0] );
				}
				toolbarContainer.appendChild( editor.ui.view.toolbar.element );

				_this.editor = editor;
				editor.model.document.on( 'change:data', ( e ) => {
					let richText = editor.getData();
					_this.props.onchange && _this.props.onchange( richText );
				} );
			} )
			.catch( ( error ) => {
				console.error( error );
			} );
	}

	render() {
		return (
			<div>
				<div id="toolbar-container"></div>
				<div id="editor" style={{ border: '1px solid #d0c9c9', borderTop: 'none' }}>
					<Input.TextArea></Input.TextArea>
				</div>
			</div>
		);
	}
}

export default React.memo( Rich_text_editor );

